<!DOCTYPE html>
<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}">
    <head>
        {{ partial "head.html" . }}
        <script src="{{ .Site.BaseURL }}js/single-text-align.js"></script>
    </head>
    <body>
        <div class="wrapper">
            {{ range .Data.Pages.ByDate.Reverse }}
                <div class="top-nav">
                    <img src="{{ .Site.BaseURL }}{{ .Site.Params.logo }}">
                    <h3><a href="{{ .Site.BaseURL }}{{ .Site.Params.button_3 }}" rel="me">{{ .Site.Title }}</a></h3>
                    <text>·</text>
                    <a href="{{ .Site.BaseURL }}{{ .Site.Params.button_1 }}">Home</a>
                    <a href="{{ .Site.BaseURL }}{{ .Site.Params.button_2 }}">Playground</a>
                    <a href="{{ .Site.BaseURL }}{{ .Site.Params.button_3 }}" rel="me">About</a>
                </div>

                <div class="side-nav">
                    {{ partial "sidebar.svg" . }}
                </div>

                <div class="playground-header-container">
                    <div class="playground-header">
                        <table>
                            <tr>
                                <th><hr class="playground-line"></th>
                                <th style="width: 104px;">
                                    <div class="playground-date">
                                        <h3>{{ .Date.Format "02" }}</h3></br>{{ .Date.Format "January" | upper }}
                                    </div>
                                </th>
                                <th><hr class="playground-line"></th>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="playground-body">
                    {{ .Content }}
                </div>
            {{ end }}
            {{ partial "footer.html" . }}
        </div>
    </body>
</html>